<%- include('header.html') -%>

<h1>掘金博客搜索</h1>
<form id="myForm">
  <input name="keyword" type="text" />
  <button type="submit">搜索</button>
</form>
<ul id="articleList"></ul>
<script src="/node_modules/ejs/ejs.min.js"></script>
<script>
  const form = document.getElementById('myForm')
  const articleList = document.getElementById('articleList')

  form.addEventListener('submit', function (event) {
    event.preventDefault() // 阻止默认的表单提交行为

    // 在这里执行你的自定义逻辑
    // 例如，获取表单数据并进行处理
    const keywordInput = form.elements.keyword
    const keyword = keywordInput.value
    console.log('Submitted keyword:', keyword)

    // 可以通过 AJAX 或其他方式将数据发送到服务器
    // 这里只是一个简单的示例，将数据打印到控制台
    // 对第三方服务器的客户端请求的跨域问题无法解决
    // fetch(
    //   `https://api.juejin.cn/search_api/v1/search?aid=2608&uuid=7168314789041751567&spider=0&query=${encodeURIComponent(
    //     keyword
    //   )}&id_type=0&cursor=0&limit=5&search_type=0&sort_type=2&version=1`,
    //   {
    //     method: 'GET',
    //     mode: 'no-cors',
    //     Referer: '',
    //     referrerPolicy: 'no-referrer',
    //   }
    // )

    // 利用服务端没有跨域的问题,请求第三方服务器的数据
    fetch(`http://localhost:3000/juejinSearch?keyword=${encodeURIComponent(keyword)}&id_type=0&cursor=0&limit=5&search_type=0&sort_type=2&version=1`)
      .then((response) => response.json())
      .then((res) => {
        console.log('fetch-res', res)
        //       const template = `<% data.forEach(function(item){ %>
        // <li>
        //   <% if (item.result_model.article_info) { %>
        //   <div class="article-card">
        //     <img class="article-cover" src="<%= item.result_model.article_info.cover_image %>" alt="<%= item.result_model.article_info.title %>" />
        //     <div class="article-content">
        //       <h2 class="title"><%= item.result_model.article_info.title %></h2>
        //       <div class="abstract"><%= item.result_model.article_info.brief_content %></div>
        //     </div>
        //   </div>
        //   <% } %>
        // </li>
        // <% }) %>`
        const template =
          '<? data.forEach(function(item){ ?>\
        <li>\
          <? if (item.result_model.article_info) { ?>\
          <div class="article-card">\
            <img class="article-cover" src="<?= item.result_model.article_info.cover_image ?>" alt="<?= item.result_model.article_info.title ?>" />\
            <div class="article-content">\
              <h2 class="title"><?= item.result_model.article_info.title ?></h2>\
              <div class="abstract"><?= item.result_model.article_info.brief_content ?></div>\
            </div>\
          </div>\
          <? } ?>\
        </li>\
        <? }) ?>'
        // const template = '<h1>Hello, [?= name ?]!</h1>'
        // const renderedHTML = ejs.render(template, { name: 'John' }, { delimiter: '?',openDelimiter: '[', closeDelimiter: ']' })
        const renderedHTML = ejs.render(
          template,
          {
            data: res?.data || [],
          },
          {
            delimiter: '?',
          }
        )
        articleList.innerHTML = renderedHTML
      })
      .catch((err) => console.log('Request Failed', err))
  })
</script>
<%- include('footer.html') -%>
